<template>
    <div>
        <div class="box">
            <div class="box_title">数据总览</div>
            <div class="statisticBodyBox">
                <div class="statisticBodyBox_content">
                    <a-statistic title="处理中事务数" :value="todayStatistic.currentTm" show-group-separator />
                </div>
                <div class="statisticBodyBox_content">
                    <a-statistic title="等待中事务数" :value="todayStatistic.waitingTm" show-group-separator />
                </div>
                <div class="statisticBodyBox_content">
                    <a-statistic title="已处理事务数" :value="todayStatistic.totalTm" show-group-separator />
                </div>
                <div class="statisticBodyBox_content">
                    <a-statistic title="已转发数" :value="todayStatistic.replyTotal" show-group-separator />
                </div>
            </div>
        </div>
        <div class="box" style="margin-top: 15px;">
            <div class="box_title">转发速度趋势</div>
            <div style="padding:20px;">
                <e-charts ref="chart" class="chart" :option="option" style="height:400px;width: 100%;" />
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            todayStatistic: {},
            option: {
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        var result = params[0].name + '<br>';
                        params.forEach(function (item) {
                            // item.seriesName
                            result += item.marker + ' 转发速度: ' + item.value + '<br>';
                        });
                        return result;
                    }
                },
                grid: {
                    top: 40,
                    left: 40,
                    bottom: 30,
                    right: 40
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                        color: '#efefef',
                    },
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ['#efefef'],
                            width: 1,
                            type: 'dashed'
                        }
                    }
                },
                series: [
                    {
                        data: [],
                        type: 'line',
                        smooth: true,
                        areaStyle: {},
                        symbol: 'none',
                        areaStyle: {
                            color: {
                                type: 'linear', // 线性渐变
                                x: 0, // 渐变起始点 x
                                y: 0, // 渐变起始点 y
                                x2: 0, // 渐变结束点 x
                                y2: 1, // 渐变结束点 y
                                colorStops: [{
                                    offset: 0, color: 'rgba(64, 158, 255, 0.8)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(64, 158, 255, 0)' // 100% 处的颜色
                                }]
                            }
                        }
                    },
                ]
            },
            timer: "",
        }
    },
    mounted() {
        this.refresh();
        this.timer = setInterval(this.refresh, 5000);
    },
    beforeUnmount() {
        clearInterval(this.timer);
    },
    methods: {
        refresh() {
            this.getTodayStatistic();
            this.getStateChart();
        },
        getTodayStatistic() {
            this.$http.get('/api/proxy/data').then(({
                data: res
            }) => {
                if (res.code !== 0) {
                    Modal.message({ message: res.msg, status: 'error' })
                    return
                }
                this.todayStatistic = res.data;
            }).catch(() => { })
        },
        getStateChart() {
            this.$http.get('/api/home/stateChart').then(({
                data: res
            }) => {
                if (res.code !== 0) {
                    Modal.message({ message: res.msg, status: 'error' })
                    return
                }
                var names = [];
                var values = [];
                res.data.forEach(item => {
                    names.push(item.time.split(" ")[1]);
                    values.push(item.tmSpeed);
                });
                this.option.xAxis.data = names;
                this.option.series[0].data = values;
            }).catch(() => { })
        },
    },
}
</script>
<style scoped>
.box {
    border: 1px solid #eaedf1;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.box_title {
    color: #0c0d0e;
    font-size: 16px;
    font-weight: 500;
    height: 24px;
    line-height: 1.5;
}

.statisticBodyBox {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.statisticBodyBox_content {
    height: 58px;
    margin-left: 10px;
    padding: 15px 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 240px;
}

.desc {
    color: var(--color-text-2);
    font-size: 13px;
    line-height: 1.69;
    text-align: left;
}

.number {
    color: var(--color-text-1);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.56;
    text-align: left;
}
</style>